<template>
  <div class="goods-item" @click="itemClick">
    <img :src="showImage" alt="" @load="imageLoad" />
    <div>
      <p class="title">{{ goodsItem.title }}</p>
      <span class="pc">
        <span class="price">{{ goodsItem.price }}</span>
        <span class="cfav">♥{{ goodsItem.cfav }}</span>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // imagesLength: 0,
      // debounce1: null,
    };
  },
  props: {
    goodsItem: {
      type: Object,
      default: {},
    },
  },
  computed: {
    showImage() {
      return this.goodsItem.image || this.goodsItem.show.img;
    },
  },
  created() {},
  methods: {
    itemClick() {
      this.$router.push({
        // name: "detail",
        // params: { id: this.goodsItem.iid },
        path: "/detail",
        query: { id: this.goodsItem.iid },
      });
    },
    imageLoad() {
      // this.$bus.$emit("goodsImageFinsh");
    },
  },
};
</script>

<style lang='less' scoped>
.goods-item {
  width: 48.5%;
  padding: 6px;
  img {
    width: 100%;
    height: 269px;
  }
  .title {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .pc {
    display: flex;
    justify-content: center;
    .price {
      padding: 0 2px;
      color: rgb(245, 117, 138);
    }
    .cfav {
      padding: 0 2px;
    }
  }
}
</style>
